import React, { Component } from 'react';
import {
  Card,
  Row,
  Col,
  Icon
} from 'antd';
import Todo from './Todo';
import Hello from './Hello';
import Feed from './Feed';
import ProjectList from './ProjectList'
import '../../style/common.less';
import './Dashboard.less';

class Dashboard extends Component {

  constructor(props) {
    super(props);
    this.state = {
      feedLoading: false
    }
  }

  bindChild = (ref) => {
    this.childFeed = ref;
  }
  refreshFeed = () => {
    this.setState({
      feedLoading: true
    })
    this.childFeed.refreshFeed(() => {
      this.setState({
        feedLoading: false
      })
    });
  }

  render() {
    const { feedLoading } = this.state;
    return (
      <div className="dashboard">
        <div className="hello">
          <Hello />
        </div>
        <Row gutter={{xl: 12, xll: 24}} justify="space-around">
          <Col className="col" lg={{span: 24}} xl={{span: 12}}>
            <div>
              <Card className="card" title="待办事项">
                <Todo />
              </Card>
            </div>
            <div>
              <Card title="进行中的项目" className="card">
                <ProjectList />
              </Card>
            </div>
          </Col>
          <Col lg={{span: 24}} xl={{span: 12}}>
            <div>
              <Card title="Feed" className="card" extra={<a className={feedLoading ? 'refreshFeed loading' : 'refreshFeed'} onClick={this.refreshFeed}><Icon type="sync" /></a>}>
                <Feed bindChild={this.bindChild} />
              </Card>
            </div>
          </Col>
        </Row>
      </div>
    )
  }
}

export default Dashboard;